<template>
    <el-card shadow="always" :body-style="{ padding: '20px' }">
        <el-form :model="form" ref="form" :rules="rules" label-width="80px" :inline="true" size="normal">

            <el-form-item label="一级分类">
                <el-select v-model="cStore.c1ID" class="m-2" placeholder="请选择" size="large" @change="c2ChangeList" :disabled="sonce != 0" >
                    <el-option v-for="(c1val,index) in cStore.c1Data" :label="c1val.name" :value="c1val.id" :key="c1val.id"/>
                </el-select>
            </el-form-item>


            <el-form-item label="二级分类">
                <el-select v-model="cStore.c2ID" class="m-2" placeholder="请选择" size="large" @change="c3ChangeList"  :disabled="sonce != 0">
                    <el-option v-for="(c2val,index) in cStore.c2Data" :label="c2val.name" :value="c2val.id" :key="c2val.id" />
                </el-select>
            </el-form-item>


            <el-form-item label="三级分类">
                <el-select v-model="cStore.c3ID" class="m-2" placeholder="请选择" size="large" :disabled="sonce != 0">
                    <el-option v-for="(c3val,index) in cStore.c3Data" :label="c3val.name" :value="c3val.id" :key="c3val.id"/>
                </el-select>
            </el-form-item>
        </el-form>


    </el-card>


</template>
  
<script lang="ts" setup>
import { ref ,onMounted ,defineProps} from 'vue'
import CStores from '@/stores/attr'

defineProps(['sonce'])

let cStore = CStores()

//页面挂载时获取一级下拉
onMounted(() => { 
    cStore.getC1Data()
})
//获取二级下拉
const c2ChangeList = ()=>{
    cStore.getC2Data()
}
//获取三级下拉
const c3ChangeList = ()=>{
    cStore.getC3Data()
}
let value = ref('')
</script>

<style scoped>

</style>